<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('新增市政收入报表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    .gray-bg {
        background-color: #FFFFFF;
    }

    form {
        white-space: nowrap;
    }

</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="edit" AUTOCOMPLETE="OFF">
        <input type="hidden" id="companyId" name="companyId">
        <input type="hidden" id="programName" name="programName">
        <input type="hidden" id="programId" name="programId">
        <input type="hidden" id="incomeId" name="incomeId">
        <h4 class="form-header h4">实际</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">实际月份：</label>
                    <div class="col-sm-8">
                        <input id="actualMonth" name="actualMonth" class="form-control" placeholder="yyyy-mm-dd"
                               type="text" th:value="${income.actualMonth}" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">实际产值：</label>
                    <div class="col-sm-6">
                        <input id="actualFinish" name="actualFinish" class="form-control" type="number" readonly
                               required>
                    </div>
                    <div class="col-sm-2">
                        <span type='button' class='btn btn-sm opt' onclick="addHtml('实际')">+</span>
                    </div>
                    <div id="actualFinish_html"></div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">实际回款：</label>
                    <div class="col-sm-8">
                        <input id="actualPayment" name="actualPayment" class="form-control" type="number"
                               placeholder="请输入实际回款" th:value="${income.actualPayment}" required>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">计划</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">计划月份：</label>
                    <div class="col-sm-8">
                        <input id="planMonth" name="planMonth" class="form-control" placeholder="yyyy-mm-dd"
                               type="text" th:value="${income.planMonth}" required readonly>
                    </div>
                </div>
                <!--<div class="col-sm-6">-->
                    <!--<label class="col-sm-4 control-label">计划利润：</label>-->
                    <!--<div class="col-sm-8">-->
                        <!--<input id="aimProfit" name="aimProfit" class="form-control" placeholder="yyyy-mm-dd"-->
                               <!--type="text" th:value="${income.aimProfit}" required>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">计划产值：</label>
                    <div class="col-sm-6">
                        <input id="planFinish" name="planFinish" class="form-control" type="number" readonly required>
                    </div>
                    <div class="col-sm-2">
                        <span type='button' class='btn btn-sm opt' onclick="addHtml('计划')">+</span>
                    </div>
                    <div id="planFinish_html"></div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">计划回款：</label>
                    <div class="col-sm-8">
                        <input id="planPayment" name="planPayment" class="form-control" placeholder="请输入计划回款"
                               type="number" th:value="${income.planPayment}" required>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>

<script th:inline="javascript">
    var prefix = ctx + "income";
    var actual_index = 1;//计数器1
    var plan_index = 1;//计数器2
    var actualFinish = 0;//实际产值
    var planFinish = 0;//计划产值
    var value = {};//动态input的值

    $(function () {
        formatDate();
        $("#planMonth").val(dateFormat(new Date($("#actualMonth").val())));
        /* 初始化 数据 */
        $("#companyId").val([[${income.companyId}]]);
        $("#programId").val([[${income.programId}]]);
        $("#incomeId").val([[${income.incomeId}]]);

        var incomeDetails = [[${incomeDetails}]];
        for (var i = 0; i < incomeDetails.length; i++) {
            if (incomeDetails[i].actualIncomeData != null) {
                value.actualIncomeData = incomeDetails[i].actualIncomeData;
                value.actualIncomeName = incomeDetails[i].actualIncomeName;
                addHtml("实际", value);
                changeVal("实际");
            }
            if (incomeDetails[i].planIncomeData != null) {
                value.planIncomeData = incomeDetails[i].planIncomeData;
                value.planIncomeName = incomeDetails[i].planIncomeName;
                addHtml("计划", value);
                changeVal("计划");
            }
        }
    })

    function addHtml(type, value) {
        if (type == "实际") {
            $("#actualFinish_html").append("<div class='actualFinish_html'><div>\n" +
                "<label class=\"col-sm-4 control-label\" style=\"margin-top: 8px;padding-right: 0px;padding-left: 0px;\"><input class=\"form-control\" type=\"text\" placeholder=\"请输入类别名\" name=" + 'IncomeDetail[' + actual_index + "].actualIncomeName value='" + (value != undefined ? value.actualIncomeName : '') + "' required></label>\n" +
                "<div class=\"col-sm-6\" style=\"margin-top: 15px;\">\n" +
                "    <input class=\"form-control actual_val\" type=\"number\" name=" + 'IncomeDetail[' + actual_index + "].actualIncomeData onchange=\"changeVal('实际')\" value='" + (value != undefined ? value.actualIncomeData : '') + "'  required>\n" +
                "</div>\n" +
                "<div class=\"col-sm-2\">\n" +
                "<span type='button' class='btn btn-sm opt del' style=\"margin-top: 15px;\" onclick=\"del(this,'实际')\">-</span>\n" +
                "</div>\n" +
                "</div></div>");
            actual_index++;
        } else {
            $("#planFinish_html").append("<div class='planFinish_html'><div>\n" +
                "<label class=\"col-sm-4 control-label\" style=\"margin-top: 8px;padding-right: 0px;padding-left: 0px;\"><input class=\"form-control\" type=\"text\" placeholder=\"请输入类别名\" name=" + 'IncomeDetail[' + plan_index + "].planIncomeName value='" + (value != undefined ? value.planIncomeName : '') + "' required></label>\n" +
                "<div class=\"col-sm-6\" style=\"margin-top: 15px;\">\n" +
                "    <input class=\"form-control plan_val\" type=\"number\" name=" + 'IncomeDetail[' + plan_index + "].planIncomeData onchange=\"changeVal('计划')\" value='" + (value != undefined ? value.planIncomeData : '') + "' required>\n" +
                "</div>\n" +
                "<div class=\"col-sm-2\">\n" +
                "<span type='button' class='btn btn-sm opt del' style=\"margin-top: 15px;\" onclick=\"del(this,'计划')\">-</span>\n" +
                "</div>\n" +
                "</div></div>");
            plan_index++;
        }
    }

    function del(e, type) {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
        changeVal(type);
    }

    function changeVal(type) {
        if (type == "实际") {
            actualFinish = 0;
            for (var i = 0; i < $(".actualFinish_html").find(".actual_val").length; i++) {
                actualFinish = actualFinish + Number($(".actualFinish_html").find(".actual_val")[i].value);
            }
            $("#actualFinish").val(Number(actualFinish).toFixed(2));
        } else if (type == "计划") {
            planFinish = 0;
            for (var i = 0; i < $(".planFinish_html").find(".plan_val").length; i++) {
                planFinish = planFinish + Number($(".planFinish_html").find(".plan_val")[i].value);
            }
            $("#planFinish").val(Number(planFinish).toFixed(2));
        }
    }

    function formatDate() {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#actualMonth',
                type: 'month',
                done: function (value, date) {
                    $("#planMonth").val(dateFormat(new Date(value)));
                }
            });
        });
    }

    //计划月份+1
    function dateFormat(dateData) {
        var date = new Date(dateData)
        var y = date.getFullYear()
        var m = date.getMonth() + 2;
        y = m == 13 ? (y + 1) : y
        m = m == 13 ? ("0" + 1) : m < 10 ? ("0" + m) : m
        const time = y + '-' + m
        return time
    }


    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#edit").serializeArray();
            $.operate.save(prefix + "/edit", data);
            parent.refresh();
        }
    }

</script>
</body>
</html>